<template>
  <div>
    <!-- 搜索 -->
    <div class="werapp">
      <p>《</p>
      <input placeholder="输入城市/景点/游玩主题" @input="search"/>
      <span>北京▼</span>
    </div>
    <!-- 轮播图 -->
    <swiper class="banner">
      <!-- slides -->
      <swiper-slide v-for="item in banner" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl" />
      </swiper-slide>
    </swiper>
    <!--分类  -->
    <div class="icons">
      <swiper>
        <swiper-slide v-for="(page, index) in pages" :key="index">
          <div class="icon" v-for="item in page" :key="item.id">
            <div class="icon-img">
              <img class="icon-img-content" :src="item.imgUrl" />
            </div>
            <p class="icon-desc">{{ item.desc }}</p>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <!-- 热门推荐 -->
    <div class="item-goods">
      <h4>热门推荐</h4>
      <ul>
        <li v-for="item in recommendList" :key="item.id">
          <img :src="item.imgUrl" alt="" />
          <div class="goods-text">
            <h3>{{ item.title }}</h3>
            <p>{{ item.desc }}</p>
            <div class="text">查看详情</div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 周末去哪 -->
    <div class="item-goods1">
      <h4>周末去哪</h4>
      <div class="text-list" v-for="item in weekendList" :key="item.id">
        <img :src="item.imgUrl" alt="" />
        <h3>{{ item.title }}</h3>
        <p>{{ item.desc }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import data from "../assets/data.json";
export default {
  data() {
    return {
      banner: data.swiperList,
      iconList: data.iconList,
      recommendList: data.recommendList,
      weekendList: data.weekendList,
    };
  },
  created() {
    console.log(this.banner);
  },
  computed: {
    pages() {
      const pages = [];
      this.iconList.forEach((item, index) => {
        //page当前下标的数据应该展示在轮播图的第几页   index是3 下标是2  Math.floor(2/8)向下取整为0  Math.floor(8/8)向下取整为1
        const page = Math.floor(index / 8);
        if (!pages[page]) {
          pages[page] = [];
        }
        pages[page].push(item);
      });
      return pages;
    },
  },
  methods: {
    search(e) {
      console.log(e);
      var value=e.target.value;
      this.recommendList=data.recommendList.filter((c)=>{
        return c.title.includes(value)
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.werapp {
  display: flex;
  height: 50px;
  justify-content: space-between;
  align-items: center;
  background: rgb(102, 212, 249);
  line-height: 50px;
  color: white;
  p {
    width: 50px;
    text-align: center;
  }
  input {
    flex: 1;
    height: 30px;
  }
  span {
    width: 100px;
    text-align: center;
  }
}
.banner {
  .swiper-img {
    width: 100%;
    height: 100%;
  }
}
.icons {
  background: white;
  .swiper-wrapper {
    width: 100%;
    height: 300px;
    .swiper-slide {
      display: flex;
      flex-wrap: wrap;
      .icon {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        div {
          width: 100px;

          img {
            width: 100%;
          }
        }

        
      }
    }
  }
}
.item-goods {
  h4{
    height: 50px;
    background-image: linear-gradient(to right, gray, white,gray);
    line-height: 50px;
    font-size: 20px;
  }
  ul {
    list-style: none;
    li {
      background: white;
      display: flex;
      align-items: center;
      img {
        width: 100px;
        height: 100px;
      }
      .goods-text {
        margin-left: 10px;
        p {
          color: rgb(188, 188, 188);
        }
        .text {
          width: 80px;
          height: 40px;
          background: orange;
          text-align: center;
          line-height: 40px;
        }
      }
    }
  }
}
.item-goods1 {
    h4{
    height: 50px;
    background-image: linear-gradient(to right, gray, white,gray);
    line-height: 50px;
    font-size: 20px;
  }
  .text-list {
    background: white;
    img {
      width: 100%;
    }
    p {
      color: rgb(188, 188, 188);
    }
  }
}
</style>